<!<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>article_manager</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="static/common/jquery-3.3.1.min.js"></script>
    <style>
        .tips{position: fixed;top: 0;width: 99%;height: 55px;z-index: 999;border-radius: 6px;margin-left: 0.5%;text-align: center;line-height: 55px;}
        .tips.success{background-color: #DFF0D8;}
        .tips.danger{background-color: #F2DEDE;}
        .tips.warning{background-color: #FCF8E3;}
        .tips .tips_msg{}
        .bg-wrap, body, html {height: 100%;margin: 0;}
        input{line-height: normal;-webkit-appearance: textfield;background-color: white;-webkit-rtl-ordering: logical;cursor: text;padding: 1px;border-width: 2px;border-style: inset;border-color: initial;border-image: initial;}
        input[type="text"], input[type="password"]{border: 0;outline: 0;}
        input, button{text-rendering: auto;color: initial;letter-spacing: normal;word-spacing: normal;text-transform: none;text-indent: 0px;text-shadow: none;display: inline-block;text-align: start;margin: 0em;font: 400 13.3333px Arial;}
        input[type=button]{-webkit-appearance: button;cursor: pointer;}
        .bg-wrap {position: relative;background: url(static/system/img/articlebg.jpg) top left no-repeat;background-size: cover;overflow: hidden;}
        .main-cont-wrap{z-index: 1;position: absolute;top: 62%;left: 50%;margin-left: -190px;margin-top: -255px;box-sizing: border-box;width: 380px;padding: 30px 30px 40px;background: #fff;box-shadow: 0 20px 30px 0 rgba(63,63,65,.06);border-radius: 10px;}
        .form-title{margin-bottom: 40px;}
        .form-title>span{font-size: 20px;color: #2589ff;}
        .form-item{margin-bottom: 30px;position: relative;height: 40px;line-height: 40px;border-bottom: 1px solid #e3e3e3;box-sizing: border-box;}
        .form-txt{display: inline-block;width: 70px;color: #595961;font-size: 14px;margin-right: 10px;}
        .form-input{border: 0;outline: 0;font-size: 14px;color: #595961;width: 155px;}
        .form-btn{margin-top: 40px;}
        .ui-button{display: block;width: 320px;height: 50px;text-align: center;color: #fff;background: #2589ff;border-radius: 6px;font-size: 16px;border: 0;outline: 0;}
    </style>
</head>
<body>
    <div class="tips" style="">
            <object data="" type="image/svg+xml" style="position: relative;top: 2px;"></object>
            <span class="tips_msg"></span>
    </div>
    <div class="bg-wrap">
        <div class="main-cont-wrap login-model">
            <form id="form">
                <div class="form-title">
                    <span>简知管理后台登录</span>
                </div>
                <div class="form-item">
                    <span class="form-txt">账号：</span>
                    <input type="text" class="form-input original" id="login_name" name="mName" placeholder="请输入账号" data-type="必填" error-pos="32" />
                </div>
                <div class="form-item">
                    <span class="form-txt">密码：</span>
                    <input type="password" class="form-input original" id="login_pwd" name="mPwd" placeholder="请输入密码" data-type="必填" error-pos="32" />
                </div>
                <div class="form-btn">
                    <input type="button" class="ui-button" id="login" value="登录" />
                </div>
            </form>
        </div>
    </div>
</body>
<script>
    $(document).ready(function(){
         login();//登录

    });
    /*提示信息函数封装*/
    function tips(status,tips_msg){
          $('.tips').css('display','block'); 
          $('.tips_msg').text(tips_msg);
          if(status=='401'){
            $('.tips').attr('class','tips danger');
            $('object').attr('data','static/system/svg/error.svg');
          }else if(status=='200'){
            $('.tips').attr('class','tips success');
            $('object').attr('data','static/system/svg/success.svg');
          }else if(status=='501'){
            $('.tips').attr('class','tips warning');
            $('object').attr('data','static/system/svg/warning.svg');
          }
          $('.tips').fadeOut(3000); 
    }
    /*登录*/
    function login(){
        $('#login').on('click',function(){
            var data={'mName':$('#login_name').val(),'mPwd': $('#login_pwd').val()};
            var url='/article_manager_module/manager_login';
            fetch(url, {
                method: 'POST',
                body: JSON.stringify(data),
                headers: new Headers({
                'Content-Type': 'application/json;charset=utf-8'
                })
            }).then(res => res.json()).catch(error => console.error(error))
            .then(function(response){
                if(response.status=='401'){
                    //正上方信息验证
                    tips(response.status,response.msg);
                }else if(response.status=='200'){
                   
                        window.location.href="http://localhost/article_manager_index.html";
                    
                    
                }
            });
         });
    }

</script>
</html>